Học cách làm dự án Scratch không chỉ "chạy được" mà còn dễ nhìn, dễ hiểu và thú vị khi người khác chơi hoặc xem.
UI và UX là gì?
Giao diện (UI — User Interface) là những gì người dùng nhìn thấy trên màn hình: nút bấm, chữ, màu sắc, vị trí điểm số, phông nền… Trải nghiệm (UX — User Experience) là cảm giác khi dùng: có dễ hiểu không, có biết phải làm gì tiếp không, có vui và không bực mình không.
Trên Scratch, sân khấu 480×360 pixel chính là "màn hình" UI mà bạn thiết kế
UI
Trông như thế nào — hình ảnh, bố cục, màu
UX
Cảm giác khi dùng — rõ ràng, mượt, công bằng
Code chạy đúng nhưng người chơi không biết bấm đâu — đó là vấn đề UX. Nút đẹp nhưng chữ trùng màu nền không đọc được — đó là vấn đề UI. Hai phần luôn đi cùng nhau.
💡 Ghi nhớ
Thiết kế UI/UX không cần phần mềm chuyên nghiệp. Trên Scratch, bạn thiết kế bằng sprite, phông nền, stage monitor và cách sắp xếp chúng trên sân khấu.
Sân khấu — khung hình giao diện
Sân khấu (Stage) có kích thước cố định 480 × 360 pixel, tỷ lệ 4:3. Mọi thứ người chơi thấy — nhân vật, nút, chữ, bảng điểm — đều nằm trong khung này.
Vùng an toàn
Đặt thông tin quan trọng (điểm, mạng, nút chính) cách mép màn ít nhất 20–30 pixel. Mép sát biên dễ bị che khi xem toàn màn hình hoặc trên màn hình nhỏ.
Lớp hiển thị (layer)
Sprite có thứ tự chồng lên nhau. Dùng khối đưa lên trước / đưa ra sau để menu và nút luôn nằm trên nhân vật; phông nền luôn ở dưới cùng.
Khối hiện/ẩn, đổi trang phục và thứ tự lớp nằm trong nhóm Giao diện
📌 Bố cục HUD game điển hình
Góc trên trái: điểm số (stage monitor kiểu lớn).
Góc trên phải: mạng hoặc thời gian.
Giữa dưới: nhân vật điều khiển.
Giữa màn: khu vực chơi chính, ít chữ che khuất.
Nguyên tắc thiết kế cơ bản
Rõ ràng
Người chơi biết ngay phải làm gì
Nhất quán
Nút và màu giống nhau = cùng chức năng
Tương phản
Chữ và nền đủ khác để đọc dễ
Phản hồi
Mỗi thao tác có âm thanh hoặc hiệu ứng
Đơn giản
Bớt chi tiết thừa trên màn hình
Độ tương phản màu
Chữ trắng trên nền sáng, hoặc xanh trên xanh — rất khó đọc. Chọn cặp màu đối lập: chữ đậm trên nền nhạt, hoặc viền trắng quanh chữ trên nền tối (vẽ trong costume nút).
Nhất quán visual
Nếu nút "Bắt đầu" màu xanh lá, nút "Tiếp tục" cũng nên xanh lá; nút "Thoát" hoặc "Hủy" dùng màu khác (đỏ/xám) để người dùng không nhầm.
💡 Ghi nhớ
Giới hạn bảng màu 3–5 màu chính cho cả dự án. Quá nhiều màu rối mắt và trông thiếu chuyên nghiệp.
Nút bấm và menu
Trên Scratch, "nút" thường là sprite hình chữ nhật có chữ, gắn script khi nhấn vào nhân vật này. Thiết kế nút tốt cần:
Kích thước đủ lớn — dễ bấm, đặc biệt trên màn cảm ứng.
Nhãn rõ — "Chơi", "Cài đặt", "Quay lại" thay vì chỉ icon khó hiểu.
Trạng thái hover — khi chuột đè lên, đổi độ sáng hoặc costume để báo "có thể bấm".
Âm thanh click — tiếng "pop" nhẹ xác nhận đã nhận lệnh.
Sự kiện nhấn sprite và phím là hai cách điều khiển phổ biến — nên hỗ trợ cả hai nếu có thể
📌 Màn hình tiêu đề (title screen)
Trước khi game bắt đầu: phông nền đẹp, tên game lớn, một nút "Bắt đầu". Cờ xanh chỉ hiện màn hình này; game thật chỉ chạy sau khi bấm nút (broadcast start_game).
Hiển thị thông tin cho người chơi
Stage monitor
Biến và đồng hồ hiển thị trên sân khấu — chọn kiểu large readout cho số to, dễ đọc khi chơi. Kéo monitor đến góc cố định, không để che nhân vật.
Tick hiển thị biến và chọn kiểu monitor phù hợp từ menu chuột phải
Khối nói / nghĩ
Thoại dài trong bong bóng nói che màn hình. Với hướng dẫn: chia câu ngắn, hoặc dùng sprite riêng hiển thị chữ trên banner cố định phía dưới.
Hướng dẫn lần đầu
Lần đầu chơi: hiện text "Dùng phím mũi tên để di chuyển" trong 3 giây rồi ẩn. Biến đã_xem_hướng_dẫn tránh hiện lại mỗi lần restart.
Phản hồi và luồng trải nghiệm
UX tốt nghĩa là mỗi hành động của người chơi đều có phản hồi rõ ràng:
Bắt trúng vật: âm thanh vui + điểm nhảy + hiệu ứng ngắn.
Thua: màn hình game over riêng, không dừng đột ngột im lặng.
Đang tải / chuyển màn:đợi ngắn + "Đang chuyển…" — tránh cảm giác bị treo.
Thắng: fanfare, hiện điểm cuối, nút "Chơi lại".
📌 Luồng game chuẩn
Màn tiêu đề → Hướng dẫn (tùy chọn) → Gameplay → Thắng/Thua → Màn kết quả → Chơi lại hoặc Thoát. Mỗi bước là một phông nền hoặc nhóm sprite hiện/ẩn rõ ràng.
⚠️ Tránh
Quá nhiều thông báo nói chồng lên nhau; người chơi không kịp đọc. Dùng đợi đến khi hết thoại trước khi hiện lựa chọn tiếp theo.
Âm thanh và nhịp độ
Âm thanh là phần UX thường bị bỏ qua nhưng ảnh hưởng lớn đến cảm giác:
Nhạc nền vừa phải — không quá to so với hiệu ứng.
Hiệu ứng ngắn, không lặp quá dày gây khó chịu.
Tùy chọn tắt nhạc (nút loa) — tôn trọng người chơi trong lớp học hoặc thư viện.
Cân bằng âm lượng giữa nhạc nền và hiệu ứng click
Ấn tượng đầu tiên khi chia sẻ
Khi đăng lên Scratch, người khác thấy thumbnail (ảnh thu nhỏ) và tên dự án trước khi bấm chơi — đây cũng là UI:
Đặt tên ngắn, có nghĩa: "Đuổi bắt táo" thay vì "dự án cuối kỳ".
Chọn thumbnail đẹp: tạm dừng game ở cảnh đẹp nhất, chụp hoặc vẽ ảnh đại diện.
Viết hướng dẫn trong phần mô tả: phím điều khiển, mục tiêu game.
Thêm thẻ (tag) phù hợp: game, animation, art…
💡 Ghi nhớ
Thumbnail và tên tốt giúp dự án được nhiều người thử — phần thưởng cho công sức thiết kế UI bên ngoài sân khấu.
Kiểm thử với người dùng thật
Bạn không thể tự đánh giá UX hoàn toàn khách quan. Hãy:
Cho bạn chơi không giải thích trước — quan sát họ có bối rối không.
Hỏi: "Bạn biết phải làm gì không?" sau 10 giây đầu.
Ghi lại chỗ họ bấm nhầm hoặc hỏi "làm sao để…".
Sửa một vấn đề mỗi lần, rồi test lại.
⚠️ Lỗi UX phổ biến trên Scratch
Nút quá nhỏ; điểm số che gameplay; không có hướng dẫn; game over không có cách chơi lại; quá nhiều sprite cùng lúc gây rối.
Bài tập thực hành
Chọn một dự án Scratch đã có (game hoặc truyện), cải thiện UI/UX theo checklist:
📌 Checklist cải tiến
Thêm màn hình tiêu đề với nút Bắt đầu rõ ràng.
Đặt điểm/mạng vào góc, kiểu hiển thị lớn.
Thêm âm thanh khi bấm nút và khi thắng/thua.
Viết hướng dẫn 1 dòng khi bắt đầu game.
Thiết kế màn Game Over với nút Chơi lại.
Đổi thumbnail và tên dự án cho hấp dẫn.
Cho 2 người chơi thử và sửa theo phản hồi.
💡 Ghi nhớ
Thiết kế UI/UX là kỹ năng xuyên suốt: từ app điện thoại đến website đều cần người nghĩ cho người dùng cuối. Luyện trên Scratch hôm nay là nền tảng cho mọi sản phẩm số sau này.
